<template>
  <div class="vocab-test-container">
    <!-- 背景装饰（延续渐变风格） -->
    <div class="background-decoration"></div>

    <!-- 结果卡片（加载动画与前两页统一） -->
    <div class="result-card" :class="{ 'card-loaded': isLoaded }">
      <div class="card-content">
        <!-- 返回按钮（复用样式） -->
        <button class="back-btn" @click="goBackToHome">
          <i class="icon-arrow-left"></i> 返回测试首页
        </button>

        <!-- 结果标题区 -->
        <div class="result-header">
          <div class="title-icon">🏆</div>
          <h1 class="main-title">测试结果</h1>
          <p class="subtitle">你的词汇量水平分析</p>
        </div>

        <!-- 核心成绩展示 -->
        <div class="core-result">
          <!-- 等级徽章（沿用等级颜色体系） -->
          <div class="level-badge" :style="{ backgroundColor: currentLevel.color }">
            {{ currentLevel.name }}
          </div>

          <!-- 等级与词汇量信息 -->
          <div class="level-info">
            <div class="level-name">{{ currentLevel.title }}</div>
            <div class="vocab-count">
              词汇量：<span class="count-value">{{ vocabCount.toLocaleString() }}</span> 词
            </div>
            <div class="vocab-count">
              年级划分：<span class="count-value">{{ level.toLocaleString() }}</span>
            </div>
            <div class="level-range">
              处于 {{ currentLevel.range }} 区间
            </div>
          </div>
        </div>

        <!-- 考纲对标区域 -->
        <div class="syllabus-section">
          <h2 class="section-title">考纲对标</h2>
          <div class="syllabus-comparison">
            <div class="syllabus-bar">
              <!-- 进度条背景 -->
              <div class="bar-bg">
                <!-- 进度条填充（根据词汇量动态计算） -->
                <div class="bar-fill" :style="{ width: syllabusProgress + '%' }"></div>
                <!-- 考纲里程碑标记 -->
                <div
                  v-for="(syllabus, index) in sortedSyllabuses"
                  :key="index"
                  class="syllabus-marker"
                  :style="{ left: `${(syllabus.value / maxSyllabusValue) * 100}%` }"
                  @mouseenter="showSyllabusTip(index)"
                  @mouseleave="hideSyllabusTip"
                >
                  <div class="marker-dot"></div>
                  <!-- 悬浮提示 -->
                  <div
                    class="syllabus-tip"
                    :class="{ 'tip-visible': activeSyllabusIndex === index }"
                  >
                    <div class="tip-name">{{ syllabus.name }}</div>
                    <div class="tip-value">{{ syllabus.value }}词</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 对标结果描述 -->
            <div class="syllabus-desc">
              {{ syllabusDescription }}
            </div>
          </div>
        </div>

        <!-- 能力解读 -->
        <div class="ability-section">
          <h2 class="section-title">能力解读</h2>
          <div class="ability-desc">
            <p>{{ currentLevel.abilityDesc }}</p>
          </div>
        </div>

        <!-- 学习建议 -->
        <div class="suggestion-section">
          <h2 class="section-title">学习建议</h2>
          <ul class="suggestion-list">
            <li class="suggestion-item" v-for="(item, index) in suggestions" :key="index">
              <i class="icon-check"></i>
              <span>{{ item }}</span>
            </li>
          </ul>
        </div>

        <!-- 操作按钮区 -->
        <div class="action-buttons">
          <button class="restart-btn" @click="restartTest">
            重新测试
            <i class="icon-refresh"></i>
          </button>
          <button class="share-btn" @click="showShareTip">
            分享结果
            <i class="icon-share"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 分享提示弹窗 -->
    <div class="share-tip" :class="{ 'tip-visible': isShowShareTip }">
      <div class="tip-content">
        <div class="tip-title">分享功能</div>
        <div class="tip-desc">已复制测试结果到剪贴板，可粘贴分享给好友~</div>
        <button class="tip-close" @click="hideShareTip">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VocabTestResult',
  // 仅接收vocabCount参数（完全忽略level）
  props: {
    vocabCount: {
      type: Number,
      default: 0 // 词汇量默认值
    },
    level: {
      type: String,
      default: '' // 词汇量默认值
    }
  },
  data() {
    return {
      isLoaded: false,
      activeSyllabusIndex: -1,
      isShowShareTip: false,
      syllabuses: [
        { name: '小学', value: 800 },
        { name: '初中', value: 1700 },
        { name: '高中', value: 3500 },
        { name: '四级', value: 4500 },
        { name: '六级', value: 6000 },
        { name: '雅思', value: 7500 },
        { name: '专四', value: 8000 },
        { name: '托福', value: 9000 },
        { name: '专八', value: 13000 }
      ],
      // 等级数据（用于匹配）
      levels: [
        {
          id: 11,
          group: 'A',
          name: 'A0',
          title: '入门',
          range: '0–600词',
          color: '#94A3B8',
          abilityDesc: '掌握基础日常词汇，能理解简单指令和短句，适合英语启蒙阶段。'
        },
        {
          id: 12,
          group: 'A',
          name: 'A1',
          title: '入门初级',
          range: '600–1400词',
          color: '#64748B',
          abilityDesc: '能应对简单日常对话，识别常见物品名称，达到小学高年级水平。'
        },
        {
          id: 13,
          group: 'A',
          name: 'A2',
          title: '入门进阶',
          range: '1400–2200词',
          color: '#475569',
          abilityDesc: '可理解基础短文和日常场景对话，接近初中低年级水平。'
        },
        {
          id: 14,
          group: 'A',
          name: 'A2+',
          title: '入门精通',
          range: '2200–3000词',
          color: '#384659',
          abilityDesc: '能阅读简单故事和说明文本，满足日常交流基本需求，接近初中毕业水平。'
        },
        {
          id: 21,
          group: 'B',
          name: 'B0',
          title: '初级入门',
          range: '3000–3500词',
          color: '#70a1f3',
          abilityDesc: '掌握高中基础词汇，能理解中等难度文本，满足校园生活基本需求。'
        },
        {
          id: 22,
          group: 'B',
          name: 'B1',
          title: '初级',
          range: '3500–4100词',
          color: '#4176ea',
          abilityDesc: '达到高中考纲要求，能阅读中等难度文章，进行日常话题讨论。'
        },
        {
          id: 23,
          group: 'B',
          name: 'B2',
          title: '初级进阶',
          range: '4100–4800词',
          color: '#3564ea',
          abilityDesc: '接近四级水平，能理解新闻简讯和普通议论文，沟通表达更流畅。'
        },
        {
          id: 24,
          group: 'B',
          name: 'B3',
          title: '初级精通',
          range: '4800–5500词',
          color: '#0739cc',
          abilityDesc: '达到四级考纲要求，能应对一般学术场景和职场基础沟通。'
        },
        {
          id: 7,
          group: 'C',
          name: 'C0',
          title: '中级入门',
          range: '5500–7500词',
          color: '#F97316',
          abilityDesc: '超过六级基础要求，能阅读专业相关文章，进行深入话题讨论。'
        },
        {
          id: 8,
          group: 'C',
          name: 'C1',
          title: '中级',
          range: '7500–9000词',
          color: '#ed5f16',
          abilityDesc: '达到雅思/托福基础要求，能理解复杂文本和学术讲座，表达逻辑清晰。'
        },
        {
          id: 9,
          group: 'C',
          name: 'C2',
          title: '中级进阶',
          range: '9000-10000词',
          color: '#ea5721',
          abilityDesc: '超过托福基础要求，能应对大部分专业学习和跨文化交流场景。'
        },
        {
          id: 91,
          group: 'C',
          name: 'C3',
          title: '中级精通',
          range: '10000-12000词',
          color: '#af460f',
          abilityDesc: '接近专八水平，能理解学术专著和复杂文献，专业领域表达精准。'
        },
        {
          id: 10,
          group: 'D',
          name: 'D0',
          title: '高级入门',
          range: '12000–13500词',
          color: '#F97316',
          abilityDesc: '达到专八考纲要求，能熟练阅读英文原版著作和专业论文。'
        },
        {
          id: 11,
          group: 'D',
          name: 'D1',
          title: '高级',
          range: '13500–15000词',
          color: '#EA580C',
          abilityDesc: '词汇量远超国内专业考试要求，能应对高端商务和学术交流。'
        },
        {
          id: 12,
          group: 'D',
          name: 'D2',
          title: '高级进阶',
          range: '15000-17500词',
          color: '#DC2626',
          abilityDesc: '接近母语者基础水平，能理解各类复杂文本和文化内涵。'
        },
        {
          id: 13,
          group: 'D',
          name: 'D3',
          title: '高级精通',
          range: '17500+词',
          color: '#a80808',
          abilityDesc: '达到专业翻译或研究级水平，词汇储备覆盖多领域深度表达。'
        }
      ]
    }
  },
  computed: {
    // 核心：仅通过vocabCount匹配等级
    currentLevel() {
      const vocab = this.vocabCount
      // 按词汇量区间匹配等级（严格遵循你的等级范围）
      if (vocab < 600) return this.levels.find(item => item.name === 'A0')
      if (vocab < 1400) return this.levels.find(item => item.name === 'A1')
      if (vocab < 2200) return this.levels.find(item => item.name === 'A2')
      if (vocab < 3000) return this.levels.find(item => item.name === 'A2+')
      if (vocab < 3500) return this.levels.find(item => item.name === 'B0')
      if (vocab < 4100) return this.levels.find(item => item.name === 'B1')
      if (vocab < 4800) return this.levels.find(item => item.name === 'B2')
      if (vocab < 5500) return this.levels.find(item => item.name === 'B3')
      if (vocab < 7500) return this.levels.find(item => item.name === 'C0')
      if (vocab < 9000) return this.levels.find(item => item.name === 'C1')
      if (vocab < 10000) return this.levels.find(item => item.name === 'C2')
      if (vocab < 12000) return this.levels.find(item => item.name === 'C3')
      if (vocab < 13500) return this.levels.find(item => item.name === 'D0')
      if (vocab < 15000) return this.levels.find(item => item.name === 'D1')
      if (vocab < 17500) return this.levels.find(item => item.name === 'D2')
      return this.levels.find(item => item.name === 'D3') // 17500+词
    },
    // 其他计算属性（考纲对标、建议等）不变
    sortedSyllabuses() {
      return [...this.syllabuses].sort((a, b) => a.value - b.value)
    },
    maxSyllabusValue() {
      return Math.max(...this.syllabuses.map(item => item.value))
    },
    syllabusProgress() {
      const progress = (this.vocabCount / this.maxSyllabusValue) * 100
      return progress > 100 ? 100 : progress
    },
    syllabusDescription() {
      const passed = this.sortedSyllabuses.filter(item => item.value <= this.vocabCount)
      const next = this.sortedSyllabuses.find(item => item.value > this.vocabCount)
      if (passed.length === 0) {
        return `尚未达到小学考纲要求（800词），还需积累 ${800 - this.vocabCount} 词。`
      }
      const lastPassed = passed[passed.length - 1]
      if (!next) return `已超过专八考纲要求（13000词），达到高级词汇水平！`
      return `已达到${lastPassed.name}考纲要求（${lastPassed.value}词），距离${next.name}考纲（${next.value}词）还差 ${next.value - this.vocabCount} 词。`
    },
    suggestions() {
      const base = [
        `重点巩固${this.currentLevel.range}区间内的高频词汇，建议结合例句记忆。`,
        `每天安排15-20分钟阅读与当前等级匹配的英文材料。`
      ]
      if (this.currentLevel.group === 'A') return [...base, '优先积累日常交流词汇，可通过听力材料辅助记忆。']
      if (this.currentLevel.group === 'B') return [...base, '开始学习词根词缀法，为应对四级考试做准备。']
      if (this.currentLevel.group === 'C') return [...base, '侧重专业领域词汇积累，尝试阅读英文原版教材。']
      return [...base, '通过深度阅读原版著作提升词汇应用能力，关注熟词僻义。']
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoaded = true
    }, 300)
  },
  methods: {
    goBackToHome() {
      this.$router.push('/vocabularyTestHome')
    },
    restartTest() {
      this.goBackToHome()
    },
    showSyllabusTip(index) {
      this.activeSyllabusIndex = index
    },
    hideSyllabusTip() {
      this.activeSyllabusIndex = -1
    },
    showShareTip() {
      // 1. 拼接需要分享的文本
      const shareText = `我的英语词汇量测试结果：${this.currentLevel.title}（${this.vocabCount}词），${this.syllabusDescription}`

      // 2. 尝试使用现代浏览器的Clipboard API（优先方案）
      if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
        navigator.clipboard.writeText(shareText)
          .then(() => {
            this.isShowShareTip = true // 复制成功，显示提示
          })
          .catch(err => {
            console.log('Clipboard API 复制失败，使用降级方案：', err)
            this.fallbackCopyText(shareText) // 降级处理
          })
      } else {
        // 3. 不支持Clipboard API，使用降级方案（创建临时输入框）
        this.fallbackCopyText(shareText)
      }
    },
    // 4. 降级方案：通过创建临时input元素复制文本（兼容所有浏览器）
    fallbackCopyText(text) {
      // 创建临时输入框
      const tempInput = document.createElement('input')
      // 设置输入框的值为需要复制的文本
      tempInput.value = text
      // 将输入框添加到页面（不可见）
      tempInput.style.position = 'fixed'
      tempInput.style.opacity = '0'
      document.body.appendChild(tempInput)

      // 选中输入框内容并复制
      tempInput.select()
      document.execCommand('copy') // 旧版浏览器复制API

      // 移除临时输入框
      document.body.removeChild(tempInput)

      // 显示复制成功提示
      this.isShowShareTip = true
    },
    hideShareTip() {
      this.isShowShareTip = false
    }
  }
}
</script>

<style scoped>
/* 基础样式复用前两页规范 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  user-select: none;
}

.vocab-test-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #E6F0FF 0%, #FFFFFF 100%);
  z-index: 1;
}

/* 卡片样式与前两页统一 */
.result-card {
  width: 100%;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 30px clamp(15px, 8vw, 100px);
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-out;
}

.card-content {
  max-width: 550px;
  margin: 0 auto;
  width: 100%;
}

.card-loaded {
  opacity: 1;
  transform: translateY(0);
}

/* 返回按钮复用样式 */
.back-btn {
  background: transparent;
  border: none;
  color: #6B7280;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 5px 0;
  margin-bottom: 15px;
  transition: color 0.2s;
}

.back-btn:hover {
  color: #3B82F6;
}

.icon-arrow-left::before {
  content: '←';
}

/* 标题区样式 */
.result-header {
  text-align: center;
  margin-bottom: 30px;
}

.title-icon {
  font-size: 40px;
  margin-bottom: 15px;
}

.main-title {
  font-size: 28px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 16px;
  color: #6B7280;
}

/* 核心成绩展示 */
.core-result {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  padding: 20px;
  background: #F9FAFB;
  border-radius: 12px;
  justify-content: center;
}

.level-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.level-info {
  text-align: left;
}

.level-name {
  font-size: 22px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 5px;
}

.vocab-count {
  font-size: 16px;
  color: #4B5563;
  margin-bottom: 3px;
}

.count-value {
  font-weight: 600;
  color: #3B82F6;
}

.level-range {
  font-size: 14px;
  color: #6B7280;
}

/* 考纲对标区域 */
.syllabus-section {
  margin-bottom: 30px;
}

/* 通用区块标题样式（与主页面统一） */
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  width: 4px;
  height: 18px;
  background: #3B82F6;
  border-radius: 2px;
}

.syllabus-comparison {
  background: #F9FAFB;
  border-radius: 12px;
  padding: 20px;
}

.syllabus-bar {
  margin-bottom: 15px;
  position: relative;
}

.bar-bg {
  height: 8px;
  background: #E5E7EB;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: #3B82F6;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.syllabus-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.marker-dot {
  width: 12px;
  height: 12px;
  background: white;
  border: 2px solid #3B82F6;
  border-radius: 50%;
}

.syllabus-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tip-visible {
  opacity: 1;
}

.tip-name {
  font-weight: 600;
  color: #1F2937;
}

.tip-value {
  color: #6B7280;
}

.syllabus-desc {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.5;
}

/* 能力解读 */
.ability-section {
  margin-bottom: 30px;
}

.ability-desc {
  background: #F9FAFB;
  border-radius: 12px;
  padding: 20px;
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
}

/* 学习建议 */
.suggestion-section {
  margin-bottom: 35px;
}

.suggestion-list {
  background: #F9FAFB;
  border-radius: 12px;
  padding: 20px;
  list-style: none;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  color: #4B5563;
  font-size: 15px;
  line-height: 1.5;
}

.suggestion-item:last-child {
  margin-bottom: 0;
}

.icon-check::before {
  content: '✅';
  flex-shrink: 0;
  margin-top: 1px;
}

/* 操作按钮区 */
.action-buttons {
  display: flex;
  gap: 15px;
}

.restart-btn, .share-btn {
  flex: 1;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.restart-btn {
  background: #3B82F6;
  color: white;
}

.restart-btn:hover {
  background: #2563EB;
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}

.share-btn {
  background: #F9FAFB;
  color: #3B82F6;
  border: 1px solid #E5E7EB;
}

.share-btn:hover {
  background: #F3F4F6;
  transform: translateY(-2px);
}

.icon-refresh::before {
  content: '🔄';
}

.icon-share::before {
  content: '📤';
}

/* 分享提示弹窗 */
.share-tip {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 20px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  min-width: 280px;
  max-width: 90%;
  text-align: center;
}

.share-tip.tip-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.tip-content .tip-title {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 10px;
}

.tip-content .tip-desc {
  font-size: 15px;
  color: #6B7280;
  margin-bottom: 15px;
  line-height: 1.5;
}

.tip-close {
  background: #3B82F6;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.tip-close:hover {
  background: #2563EB;
}

/* 响应式适配（与前两页保持一致） */
@media (max-width: 480px) {
  .result-card {
    padding: 20px 15px;
    border-radius: 12px;
  }

  .main-title {
    font-size: 24px;
  }

  .core-result {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }

  .level-info {
    text-align: center;
  }

  .level-badge {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .restart-btn, .share-btn {
    padding: 14px;
    font-size: 15px;
  }
}
</style>
